<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href = "../css/bootstrap.min.css">
    <script type="application/javascript" src="../js/jquery-1.9.0.min.js"></script>
    <script type="application/javascript" src="../js/bootstrap.min.js"></script>
    <title>按钮组样式</title>
</head>
<body>
    <div class="container">
        <legend>按钮组</legend>
        <button type="button" class="btn btn-danger">
            <span class="glyphicon home" aria-hidden="true"></span>&nbsp;注册
        </button>
        <!--   btn-group按钮组     -->
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default">Left</button>
            <button type="button" class="btn btn-default">Middle</button>
            <button type="button" class="btn btn-default">Right</button>
        </div>
        <p></p>
        <!--    按钮工具栏    -->
        <div class="btn-toolbar">
            <div class="btn-group">
                <a href="#" class="btn btn-default"><span class="glyphicon glyphicon-import"></span> </a>
                <a href="#" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> </a>
                <a href="#" class="btn btn-default"><span class="glyphicon glyphicon-tag"></span> </a>
                <a href="#" class="btn btn-default"><span class="glyphicon glyphicon-text-height"></span> </a>
            </div>
        </div>
        <!--   btn-group-lg     -->
        <div class="btn-group btn-group-lg" role="group">
            <button type="button" class="btn btn-default">Left</button>
            <button type="button" class="btn btn-default">Middle</button>
            <button type="button" class="btn btn-default">Right</button>
        </div>
        <!--   btn-group-xs     -->
        <div class="btn-group btn-group-xs" role="group">
            <button type="button" class="btn btn-default">Left</button>
            <button type="button" class="btn btn-default">Middle</button>
            <button type="button" class="btn btn-default">Right</button>
        </div>

        <!--    嵌套    -->
        <div class="btn-group " role="group">
            <button type="button" class="btn btn-default">Left</button>
            <button type="button" class="btn btn-default">Middle</button>
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">Dropdown link</a></li>
                    <li><a href="#">Dropdown link</a></li>
                </ul>
            </div>
        </div>
        <!--   垂直排列 btn-group-vertical    -->
        <p></p>
        <div class="btn-group btn-group-vertical" role="group">
            <button type="button" class="btn btn-default">Left</button>
            <button type="button" class="btn btn-default">Middle</button>
            <button type="button" class="btn btn-default">Right</button>
        </div>

        <!--   两边对齐排列 btn-group-justified    -->
        <div class="btn-group btn-group-justified" role="group" aria-label="...">
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default">Left</button>
            </div>
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default">Middle</button>
            </div>
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default">Right</button>
            </div>
        </div>

        <!--   分裂示下拉菜单     -->
        <div class="btn-group">
            <button type="button" class="btn btn-primary">Action</button>
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>

        <!--    按钮尺寸    -->
        <button type="button" class="btn btn-default btn-lg">Right</button>
    </div>
</body>
</html>